<template>
	<view v-if="pageShow" class="container">
		<view class="nav">
			<u-tabs :list="navList" @click="menuClick" :current="navCurrent" :scrollable="false" :activeStyle="{
				color: '#0177FD', fontSize: '28rpx', transform: 'scale(1)'
			}" :inactiveStyle="{
	color: '#333333', fontSize: '28rpx', transform: 'scale(1)'
}" :itemStyle="{ height: '90rpx' }">
			</u-tabs>
		</view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 90rpx);" :refresher-threshold="50"
			:refresher-background="'#F7F7F7'" :refresher-enabled="true" :refresher-triggered="isRefreshing"
			@refresherrefresh="refresherrefresh" @scrolltolower="loadMore">
			<view class="order-list">
				<view class="order-item" v-for="(item, index) in orderData" :key="index">
					<view class="header">
						<view class="service-name" @click.stop="goService(item.serviceinfo)">
							<image :src="item.serviceinfo.logo" mode="aspectFill" class="img"></image>
							<text class="name ellipsis1">{{ item.serviceinfo.name }}</text>
							<text class="cuIcon-right" style="margin-left: 14rpx;"></text>
						</view>
						<view class="status"
							:class="item.status === 0 ? 'status0' : item.status === 4 ? 'status4' : item.status === 5 ? 'status4' : 'status1'">
							<text>{{ item.status === 0 ? '待付款' : item.status === 1 ? '服务中···' : item.status === 2 ? '待确认' : item.status
								=== 5 ? '已取消' : '已完成' }}</text>
						</view>
					</view>
					<view class="order-content" @click.stop="goShopInfo(item)">
						<view class="shop-logo">
							<image :src="item.shopinfo.pic.split(',')[0]" mode="aspectFill" class="logo"></image>
						</view>
						<view class="shop-info">
							<text class="shop-name">{{ item.shopinfo.name }}</text>
							<text class="shop-price">¥ {{ item.shopinfo.price }}</text>
						</view>
					</view>
					<view class="true-service">
						<text>实付服务费：</text>
						<text class="true-price">¥ {{ item.money }}</text>
					</view>
					<view class="bottom-btn">
						<view v-if="item.status === 5" class="btn-del" @click="delOrder(item)">
							删除订单
						</view>
						<view v-if="item.status === 0" class="header-count">
							支付倒计时：<count-down :end-time="item.createtime + 1800" :title-color="titleColor"></count-down>
						</view>
						<view class="flex-end">
							<view class="btn-detail" @click="orderDetail(item)">
								{{ item.status == 0 ? "立即支付" : item.status == 2 ? "确认验收" : '查看详情' }}
							</view>
						</view>
					</view>
				</view>
				<uni-load-more v-if="orderData.length > 0" :status="listStatus"></uni-load-more>
				<view v-if="orderData.length === 0" class="empty-wrap">
					<image class="empty-img"
						src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"></image>
					<text class="tips">暂无订单</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script  type="text/javascript" src="plus-confusion://../enterpriseServer/orderList/index"></script>

<style lang="scss" scoped>
@import 'index.scss';
</style>
